<template>
    <div>
        <div class="right" style="margin-bottom:10px">
            <i-button type="primary" @click="contact=true" style="margin-right:40px" icon="md-locate">关联员工</i-button>
            <Input  style="width:200px" search enter-button placeholder="请输入搜索内容..." v-model="keyWord" @on-search="searchNotConnectedWorker"/>
        </div>
        <i-table
               border
               stripe
               height="300"
               content="self"
               :columns="columns"
               :data="tableData"
               size="large"
               @on-selection-change="keepSelected"
           /><br/>
         <Page  
                :total="pageTotal" 
                :current="pageNum"
                :page-size="pageSize"
                show-elevator
                show-total 
                placement="top" 
                @on-change="handlePage" >
           ></Page><br/>
            
           <Modal v-model="contact" title="分配账号" @on-ok="contactOk">
                <div class="center warningInfo">
                    <Icon type="ios-alert" class="warnIcon"/>确认关联选中的员工吗
                   
                </div>
                <div class="center">
                     <Alert type="warning">分配账号后请尽快提醒员工修改密码</Alert>
                </div>
           </Modal>
    </div>
</template>
<script>
export default {
    name:'contact_yForm',
    props:['id'],
    data(){
        return{
            contact:false,
            reset:false,
            keyWord:'',
            /**给Page的属性设置初始值 */
            pageTotal:0,
            pageNum:1,
            pageSize:4,
            columns:[
                {
                    type:'selection',
                    width:50
                },
                {
                    title:'姓名',
                    key:'name'
                },
                {
                    title:'员工编号',
                    key:'number'
                },
                {
                    title:'职称',
                    key:'positionTitle'
                },
                {
                    title:'职位',
                    key:'position'
                },
                {   
                    title:'联系方式',
                    key:'phone'
                },
                /** 
                {
                    title:'创建时间',
                    key:'create_time'
                }*/
             ],
            tableData:[],
            //用于保存被选中的员工的id
            staffIds:[]
            }
    },
    beforeMount(){
        this.pageNum=1;
        this.getNotConnectedWorkers();
     
    },
    mounted(){
        this.pageNum=1;
        this.getNotConnectedWorkers();
     
    },
    methods:{
             //翻页
            handlePage(value){
                this.pageNum=value;
                this.getNotConnectedWorkers();
        },
        /**得到该角色下未关联的员工信息 */
        getNotConnectedWorkers(){
            this.apis.roleApis.notLinkedPersons(this.keyWord,this.id,this.pageNum,this.pageSize,res=>{
                    var code=res.code;
                    console.log("res",res);
                    if(code===0){
                        this.pageTotal=res.data.total;
                        console.log("total:",res.data.total);
                       this. tableData=res.data.list;
                    }else{
                        this.pageTotal=0;
                        this.$Message.error(res.msg);
                    }
            })
        },
            /**搜索未关联员工 */
            searchNotConnectedWorker(){
                this. getNotConnectedWorkers();
            },
            keepSelected(selection){
                this.staffIds=[];
                var i=0;
                for(i=0;i<selection.length;i++){
                    this.staffIds.push(selection[i].id);
                }
            },
            /**确认关联员工的回调函数 */
            contactOk(){
                if(this.staffIds.length==0){
                     this.$Message.warning('请选择员工！');
                }else{
                    this.apis.roleApis.personLinkToRole(this.staffIds,this.id,res=>{
                        var code=res.code;
                        if(code===0){
                             this.$Message.success(res.data);
                            this.getNotConnectedWorkers();
                        }else{
                             this.$Message.error(res.msg);
                        }
                    })
                }
         
            }
    }
}
</script>
<style scoped>
@import "../../../../../static/global.css"; /*引入公共样式*/
</style>
